<template>
    <div>
      <!-- <div class="tab-box"> -->
      <a-row>
        <a-col :span="24">
          <div class="table-container">
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
              <!-- 搜索区域 -->
              <a-form-model layout="inline" v-bind="searchModelConfig" @keyup.enter.native="searchQuery">
                <a-row v-bind="searchRowConfig">
                  <a-col v-bind="searchColConfig">
                    <a-form-model-item label="用户名/昵称">
                      <a-input placeholder="请输入用户名/昵称" v-model="queryParam.searchValue"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col v-bind="searchColConfig">
                    <a-form-model-item label="电话">
                      <a-input placeholder="请输入号码" v-model="queryParam.phone"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col v-bind="searchColConfig" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">搜索</a-button>
                    <a-button @click="searchReset" icon="reload">重置</a-button>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>

            <!-- 操作按钮区域 -->
            <div class="table-operator">
              <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
            </div>
            <!-- table区域-begin -->
            <a-row>
              <a-col :span="24">
                <a-table :row-selection="{
                      selectedRowKeys: selectedRowKeys,
                      onChange: onSelectChange,
                    }" :columns="columns" :loading="loading" :data-source="dataSource" :rowKey="(record) => record.id" :pagination="ipagination" bordered :scroll="{x:'max-content'}">
                  <span slot="gender" slot-scope="gender">{{
                      $getDictName('SEX_LIST',gender)
                    }}</span>
  <!--                <template slot="roles" slot-scope="roles">-->
  <!--                  <a-tag v-for="(item,index) in getProjectName(roles)" :key="index">-->
  <!--                    {{item}}-->
  <!--                  </a-tag>-->
  <!--                </template>-->
                  <template slot="companyDictId" slot-scope="companyDictId">
                    {{$getDictName('COMPANY',companyDictId)}}
                  </template>
                  <template slot="action" slot-scope="text, record">
                    <ry-tooltip-button title="编辑" type="primary" icon="edit" @click="handleEdit(record)" />
                    <ry-tooltip-button title="删除" type="danger" icon="delete" @click="handleDelete(record.id)" v-if="record.role.id !== '1'" />
                  </template>
                </a-table>
              </a-col>
            </a-row>
            <!-- table区域-end -->
            <user-modal ref="modalForm" @ModalOk="modalFormOk" :url="url" :orgList="orgListNew"></user-modal>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- </div> -->
</template>

<script>
import UserModal from './modules/UserModal'
import { RyListMixin } from '@/ryweb'
import {role} from "../../../apilist/permission";
export default {
  name: '',
  mixins: [RyListMixin],
  components: { UserModal },
  data () {
    return {
      queryParam: {
      },
      deptNewList: [],
      stopSetData: true,
      orgList: [],
      orgListNew: [],
      dateRange: null,
      genderName: '',
      statusName: '',
      loading: true,
      rolesList: [],
      form: {},
      // 表头
      columns: [
        {
          title: '用户名',
          align: 'center',
          key: 'username',
          dataIndex: 'username'
        },
        {
          title: '电话',
          dataIndex: 'phone',
          key: 'phone',
          align: 'center',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
          fixed: 'right'
        }
      ],
      url: {
        list: this.$api.permission.user.user,
        roleList: this.$api.permission.role.roleList,
        delete: this.$api.permission.user.delete,
        deleteBatch: this.$api.permission.user.delete,
        add: this.$api.permission.user.insert,
        edit: this.$api.permission.user.update,
        modalInfo: this.$api.permission.user.byId
      }
    }
  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    handleChange (e) {
      console.log(e)
    },
    judgeStatus (status) {
      if (status === '1') {
        return '正常'
      } else if (status === '2') {
        return '停用'
      } else if (status === '3') {
        return '删除'
      }
    }
  },
  created () {
  }
}
</script>

<style lang="less">
.pageStyle {
  float: right;
  margin-top: 24px;
}
.clear {
  position: relative;
}
.tree-box {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  background: #fff;
  border-right: 4px solid #f0f2f5;
  overflow: auto;
}
.tab-box {
  /* position: absolute;
  left: 14%;
  right: 0;
  top: 0;
  bottom: 0; */
  /* overflow: auto; */
  margin-left: 400px;
  // overflow: auto;
}
</style>
